<html>
    <head>
        <title>单向数据流</title>
    </head>
    <body>
        <script>
             // 四、单向数据流
                              /*
                                  所有的 prop 都使得1其父子prop之间形成了一个"单向下行绑定"： 
                                       父级 prop 的更新会向下流动到子组件中，但是反过来则不行。（这会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解）

                                  额外的，每次父组件发生变更时，子组件总所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。
                                  如果你这样做了，Vue会在浏览器的控制台中发出警告。
                              */

                              /*
                                  这里有两种常见的试图修改一个prop的情况：

                                      1、"这个prop用来传递一个初始值；这个子组件接下来希望将其作为一个本地的prop数据来使用"。
                                                在这种情况下，最好定义一个本地的 data property 并将这个prop 用作其初始值：
                                                
                              */
                                                props:['initialCounter'],
                                                data:function(){
                                                  return {
                                                    counter:this.initialCounter
                                                  }
                                                }

                              /*
                                      2、"这个prop以原始的值传入且需要进行转换"
                                                在这种情况下，最好使用这个prop的值来定义一个计算属性 
                              */
                                               props:['size'],
                                               computed:{
                                                  normalizedSize:function(){
                                                    return this.size.trim().toLowerCase()
                                                  }
                                               }

                              /*
                                  注意在JavaScript中对象和数组时通过引用传递的，所以对于一个数组或对象类型的prop来说，
                                  在子组件中南改变变更这个对象或者数组本身将会影响到父组件的状态。
                              */
        </script>
    </body>
</html>